<template>
	<div>
		
		<h3>发表评论</h3>
		<hr />
		<textarea placeholder="请输入您想要评论的内容。。" v-model="postCom"></textarea>
		<mt-button type="primary" size="large" @click="subCom">primary</mt-button>

		<h3>精彩评论</h3>
		<ul class="mui-table-view">
				 <li class="mui-table-view-cell" v-for="(e,index) in list">
					<div class="header">
						<span>第{{index+1}}楼</span>
						<span>发布时间:{{e.add_time | forTime("YYYY-MM-DD HH:mm:ss")}}</span>
						<span>发布用户:{{e.user_name}}</span>
					</div>
					<div>
						{{e.content}}
					</div>
				 </li>
		         
		</ul>
		<mt-button type="primary" size="large" @click="getMoreCom">查看更多内容</mt-button>
	</div>
</template>

<script type="es6">
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return{
				postCom:"",
				pageindex : 1,
				list:[]
			}
		},
		created(){
			this.getCom()
		},
		props:['id'],
		methods:{
			subCom(){
				if(this.postCom.trim() == ''){
					Toast('您输入为空');
					return
				}
				this.$http.post("http://vue.studyit.io/api/postcomment/"+ this.id,{content:this.postCom},{emulateJSON:true}).then(function(res){
					//console.log(res)
					if(res.body.status == 0){
						Toast('提交成功');
					}
					this.list.unshift({add_time:new Date().now,content:this.postCom,
										user_name:"匿名用户"})
					this.postCom = ''

				})
			},
			getCom(){
				var url = "http://vue.studyit.io/api/getcomments/"+ this.id +"?pageindex="+ this.pageindex;
				this.$http.get(url).then(function(res){
						//console.log(res)
						// this.list = res.body.message
						this.list = this.list.concat(res.body.message)
				})
			},
			getMoreCom(){
				var a = this.pageindex++
				this.getCom()
			}
		}
	}

</script>
<style scoped>

	textarea{
		width: 95%;
		display: block;
		margin:5px auto;
	}
	.header{
		display: flex;
		justify-content: space-between;
		background-color: #d9d9d9;
		margin-bottom: 10px;
		font-size: 2vw;
	}

</style>
